import React from 'react'
import config from 'config';
import {connect} from 'react-redux'
import { message, Table, Affix, Button } from 'antd';
import { messages } from 'share/common';
import httpFetch from 'share/httpFetch';
import FileSaver from 'file-saver';
import 'styles/setting/wait-for-billing/invoice-status-query.scss';
import waitForBillingService from 'containers/financial-management/wait-for-billing/wait-for-billing.service'

class invoiceStatusQuery extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      page: 0,
      loading: false,
      data: [],
      pagination: {
        total: 0
      },
      columns: [
        {title: messages('financial-management.key403')/*序号*/, dataIndex: 'index', width: 80, render: (value, record, index) => index + 1 + 10 * this.state.page},
        {title: messages('financial-management.key646')/*申请子ID*/, dataIndex: 'invoiceNo', width: '30%'},
        {title: messages('financial-management.key433')/*开票类型*/, dataIndex: 'invoiceTypeResp', render: value => value ? value.name : '-'},
        {title: messages('financial-management.key525')/*抬头信息*/, dataIndex: 'invoiceTitle', width: '15%'},
        {title: messages('financial-management.key406')/*金额*/, dataIndex: 'amount', render: value => this.filterMoney(value), width: '10%'},
        {title: messages('financial-management.key647')/*发票状态*/, dataIndex: 'invoiceStatus', width: '10%'},
        {title: messages('financial-management.key648')/*下载电子票*/, dataIndex: 'type', width: '10%', render: (value, record) => {
          return record.invoiceTypeResp.type === 'ELECTRONICORDINARY' && record.invoiceStatusCode === '1010' ? <a onClick={() => this.download(record)}>{messages('financial-management.key649')/*下载至本地*/}</a> : '';
        }}
      ]
    }
  }

  componentWillMount() {
    this.getList();
  }

  download = (record) => {
    let hide = message.loading(messages('financial-management.key283'/*正在生成文件..*/));
    httpFetch.post(`${config.baseUrl}/api/didi/invoices/river/download`, {
      companyOID: this.props.params.companyOID,
      didiInvoiceId: record.didiInvoiceId
    }, {}, {responseType: 'arraybuffer'}).then(res => {
      let b = new Blob([res.data], {type: "application/zip"});
      let name = messages('financial-management.key650')/*滴滴发票*/;
      FileSaver.saveAs(b, `${name}.zip`);
      hide();
    })
  };

  getList = () => {
    const { companyOID, receiptedInvoiceOID } = this.props.params;
    const { page } = this.state;
    let temp = {
      companyOID,
      receiptedInvoiceOID,
      pageNo: page
    };
    this.setState({loading: true});
    waitForBillingService.getInvoiceTable(temp).then(res => {
      this.setState({
        loading: false,
        data: res.data.invoiceList,
        pagination: {
          total: Number(res.data.total),
          current: page + 1,
          onChange: this.onChangePager,
        }
      });
    }).catch(e => {
      this.setState({loading: false});
      message.error(e.response.data.message);
    });
  };

  onChangePager = (page) => {
    if (page - 1 !== this.state.page)
      this.setState({
        page: page - 1
      }, () => {
        this.getList();
      })
  };

  goBack = () => {
    window.history.go(-1);
  };

  render(){
    const { columns, data, loading, pagination } = this.state;
    return(
      <div className="invoice-status">
        <Table columns={columns}
               dataSource={data}
               bordered
               rowKey={'didiInvoiceId'}
               loading={loading}
               pagination={pagination}/>
        <Affix offsetBottom={0} className="bottom-bar">
          <Button className="back-btn" onClick={this.goBack}>{messages('common.back')/*返回*/}</Button>
        </Affix>
      </div>
    )
  }
}

function mapStateToProps(state){
  return {

  }
}

export default connect(mapStateToProps)(invoiceStatusQuery);
